﻿@model Guid?
@{
    SchoolLife.Web.Common.RegionHelper regionHelper = new SchoolLife.Web.Common.RegionHelper(Model);
    string randomId = Guid.NewGuid().ToString("N");
    string selectName = string.Format("Select{0}", randomId) + "{0}";
}
<select id="@string.Format(selectName,"Province")" name="@string.Format(selectName,"Province")" onchange="provinceChanged(this)" style="min-width:100px;">
    @foreach (var region in regionHelper.ProvinceList)
    {
        <option value="@region.Id" @(regionHelper.RegionProvinceId == region.Id ? "selected" : "")>@region.Name</option>
    }
</select>
<select id="@string.Format(selectName,"City")" name="@string.Format(selectName,"City")" onchange="cityChanged(this)" style="min-width:100px;">
    @foreach (var region in regionHelper.CityList)
    {
        <option value="@region.Id" @(regionHelper.RegionCityId == region.Id ? "selected" : "")>@region.Name</option>
    }
</select>
<select id="@ViewData.TemplateInfo.GetFullHtmlFieldName("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldName("")" style="min-width:100px;">
    @foreach (var region in regionHelper.RegionList)
    {
        <option value="@region.Id" @(Model == region.Id ? "selected" : "")>@region.Name</option>
    }
</select>

<script type="text/javascript">
    function provinceChanged(control) {
        var select = $(control);
        var regionId = select.val();
        var selectCity = $("#@string.Format(selectName, "City")");
        var selectRegion = $("#@ViewData.TemplateInfo.GetFullHtmlFieldName("")");
        $.ajax({
            type: 'POST',
            url: "@Url.Action("GetChildRegions","Home")",
            data: {regionId:regionId},
            success: function (data) {
                var html = "";
                for (var i = 0; i < data.length; i++)
                {
                    html+="<option value='"+data[i].Id+"'>"+data[i].Name+"</option>"
                }
                selectRegion.html("");
                selectCity.html(html);
                selectCity.change();
            },
            error: function (data) { },
            dataType: "json",
            async:true
        });
    }
    function cityChanged(control) {
        var select = $(control);
        var regionId = select.val();
        var selectRegion = $("#@ViewData.TemplateInfo.GetFullHtmlFieldName("")");
        $.ajax({
            type: 'POST',
            url: "@Url.Action("GetChildRegions", "Home")",
            data: {regionId:regionId},
            success: function (data) {
                var html = "";
                for (var i = 0; i < data.length; i++)
                {
                    html+="<option value='"+data[i].Id+"'>"+data[i].Name+"</option>"
                }
                selectRegion.html(html);
            },
            error: function (data) { },
            dataType: "json",
            async:true
        });
    }
    if (!$("#@ViewData.TemplateInfo.GetFullHtmlFieldName("")").val())
        $("#@string.Format(selectName,"Province")").change();
</script>